{extend name="template"}

{block name="body"}
<style>
    body{width:100%;height:100%;background: url(__ROOT__/static/index/img/reg_bg_x.jpg) repeat-x 0 top #fff;}
</style>
<div class="gas-register gas-index layui-fluid" style="margin:0 auto;width:1200px;">

    <div style="margin:0 auto;width: inherit;">
        <div class="header padding-bottom-20" style="margin-top:30px;position:relative;">
            <a href="/"><img style="height:60px;" src="__ROOT__/static/index/img/logo1.png"></a>
            <a href="/" style="position:absolute;right:0;bottom:30px;font-size:14px;color:#fff;vertical-align: bottom;">返回首页</a>
        </div>
        <style>
            .login-table{margin:40px auto 0;}
            .login-table tr{height:42px;}
            .login-table tr th{font-size:13px;color:#666;text-align: right;padding-right:10px;}
            .login-table tr td{text-align:left;}
            .login-table input.normal{
                width: 160px!important;
                height: 14px!important;
                padding: 6px 10px 7px 4px!important;
                border:1px solid #ddd;
            }
            .login-table input[type=checkbox]{
                vertical-align: -2px;
                margin-right:5px;
            }

            .login-table button {
                margin-right: 12px !important;
                padding: 7px 18px !important;
                text-decoration: none !important;
                font-size: 14px !important;
                background-color:#ff931d;
                border:0;
                color:white;
            }
            .layui-input{height:32px !important;line-height:32px !important;width:200px !important;}
            .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
                border-width: 1px;}
            .layui-tab-title li a{color:#666 !important;}
            .layui-laypage{margin:5px 0 0 0;}

        </style>
        <div class="layui-tab" style="padding:20px 0;width:100%;background-color: #fff;">

            <ul class="layui-tab-title">
                <li class="" style="min-width: 20px;"></li>
                <li><a href="/edu/enroll.html">培训报名</a></li>
                <li><a href="/edu/classlist.html">我的培训</a></li>
                <li><a href="/edu/examenroll.html">考核报名</a></li>
                <li><a href="/edu/examlist.html">我的考核</a></li>
                <li class="layui-this"><a href="/edu/cert.html">我的证书</a></li>
            </ul>
            <div class="layui-tab-content" style="min-height:300px;padding-top:0;">
                <div class="layui-tab-item layui-show">
                    <table class="layui-table" lay-skin="line">
                        <thead>
                        <tr>
                            <td style="width:100px;white-space:normal">证书编号</td><td>学员姓名</td><td>性别</td><td>身份证</td>
                            <td>发证机关</td>
                            <td style="width:120px;white-space:normal">岗位及工种</td>
                            <td>发证日期</td>
                            <td>最后复检日期</td>
                        </tr>
                        </thead>
                        <tbody name="list">

                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="10" style="padding:0 0 0 10px;">
                                <div id="pagingBox"></div>
                            </td>
                        </tr>
                        </tfoot>
                        <tfoot name="tpl" style="display: none;">
                        <tr>
                            <td>__CERT_NO__</td><td>__NAME__</td><td>__GENDER__</td><td>__IDNO__</td>
                            <td>__CERT_ORG__</td><td>__WORK_NAME__</td><td>__CERT_DATE__</td><td>__CHECK_DATE__</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>
    doSearch(1, paging=true);

    function doSearch(page=1) {
        var name = $("input[name=search-qiye-name]").val();
        $.post("/index/edu/ajaxSearchCert",{name:name,page:page},function(res) {
            $("tbody[name=list]").html(render(res.data.list));
            if(paging==true)
                doPaging(page, res.data.limit, res.data.total);
        },"json");

        function doPaging(currPage, itemsPerPage, itemTotal) {
            layui.use('laypage', function(){
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'pagingBox'
                    ,count: itemTotal //数据总数，从服务端得到
                    ,limit:itemsPerPage
                    ,curr: currPage
                    ,jump: function(obj, first){
                        if(page!=obj.curr){
                            doSearch(obj.curr, false);
                        }
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    }
                });
            });
        }

        function render(data) {
            var list = "";
            for(var i=0; i<data.length; i++){
                var html = $("tfoot[name=tpl]").html();
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__NAME__", data[i].name);
                let idno = data[i].idno.substr(0,9) + "<br />" + data[i].idno.substr(9,9);
                html = html.replace("__IDNO__", idno);
                html = html.replace("__COMPANY__", data[i].company);
                let room_no = "待分配";
                if(data[i].room_no){ room_no = data[i].room_no + "<br />" + data[i].seat_no;}
                html = html.replace("__ROOM_NO__", room_no);
                html = html.replace("__GENDER__", data[i].gender);
                html = html.replace("__CERT_NO__", data[i].cert_no);
                html = html.replace("__CERT_ORG__", data[i].cert_org);
                html = html.replace("__NO__", data[i].no);
                html = html.replace("__CERT_DATE__", data[i].cert_date);
                html = html.replace("__CHECK_DATE__", data[i].check_date);
                html = html.replace("__WORK_NAME__", data[i].work_name+"<br /><strong>"+data[i].position_name+"</strong>");
                list += html;
            }
            return list;
        }


    }
</script>
{/block}
